<template>
  <view class="over-pages">
    <!-- 搜索栏 -->
    <!-- <view class="search-bar">
      <myInput v-model="searchTxt" @search="handleSearch" />
    </view> -->

    <!-- 分类标签 -->
    <view class="category-tabs">
      <view class="product-grid">
        <view class="product-item" v-for="item in products" :key="item.id"
          @click="goToDetail(item.id, item.verificationImg)">


          <view class="product-info">
            <view class="poc">
              <text class="product-title">￥{{ item.amount }}</text>
              <text class="price1">{{ item.accountType }}券</text>
            </view>


          </view>
          <text class="tims">{{ formatTimestamp(item.create_time) }}</text>
        </view>
      </view>

      <empty v-if="products.length === 0"></empty>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import Taro from "@tarojs/taro";
const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
import myInput from "@/components/my-input/index.vue";
import http from "@/utils/http";
import empty from "@/components/empty/index.vue";
import { formatTimestamp } from "@/utils/tooler";
const params = Taro.getCurrentInstance().router?.params;

Taro.setNavigationBarTitle({
  title: "已完成",
});

const searchTxt = ref("");

const cates = ref([
  // {
  //   id: 0,
  //   name: "待支付",
  // },
  {
    id: 1,
    name: "待核销",
  },
  {
    id: 2,
    name: "已核销",
  },
  {
    id: 3,
    name: "已取消",
  },
]);

onMounted(() => {
  console.log("searchTxt", searchTxt.value);
  // http.postQuery(`/api/merchant/getOrder`, {}).then((res) => {
  //   console.log("res", res);
  // });
  updateOrder();
});

const handleTabChange = (e) => {
  console.log("e ---=", e);
  activeTab.value = e.paneKey;
  updateOrder();
};

function updateOrder() {
  if (params?.business) {
    http.postQuery(`/api/merchant/getOrder`, { type: 4 }).then((res) => {
      console.log("res ==== 订单列表", res);
      products.value = res.data.map((i) => i.columns);
    });
  } else {
    http
      .postQuery(`/api/userOrder/getOrder`, { status: 3 })
      .then((res) => {
        console.log("res ==== 订单列表", res);
        products.value = res.data.map((i) => i.columns);
      });
  }
}
function handleSearch() {
  console.log("searchTxt", searchTxt.value);
}

interface Product {
  id: number;
  name: string;
  desc: string;
  price: number;
  sold: number;
  image: string;
}

const activeTab = ref(params?.status || 1);
const products = ref<Product[]>([]);

function goToDetail(id: num, pic: string) {
  Taro.navigateTo({
    url: `/pages-detail/order/detail?id=${id}&pic=${encodeURIComponent(pic)}&status=${activeTab.value}`,
    events: {
      backEvent: function (data) {
        console.log(data);
        console.log("back 返回");
        updateOrder();
      },
    },
  });
}
</script>

<style lang="scss">
.over-pages {
  padding-bottom: 200rpx;
  background-color: #f5f5f5;

  .product-item {
    width: 100%;
    padding: 10rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid 1px #eee;

    .tims {
      color: #8d8d8d;
      font-weight: 500;
      font-size: 24rpx;
    }

    .product-image {
      width: 100%;
      height: 350rpx;
      border-radius: 16rpx 16rpx 0 0;
    }

    .product-info {
      background-color: #fff;
      padding: 20rpx;
      border-radius: 0 0 16rpx 16rpx;

      .poc {
        display: flex;
        align-items: center;
        gap: 10rpx;
      }

      .product-title {
        font-size: 32rpx;
        font-weight: 500;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 40rpx;
        color: #333;
      }

      .price1 {
        color: #fc761c;
        font-size: 20rpx;
        border: 1rpx solid #fc761c;
        padding: 6rpx 12rpx;
        border-radius: 4rpx;
      }

      .product-desc {
        font-size: 24rpx;
        color: #999;
        margin: 10rpx 0;
        display: block;
        line-height: 34rpx;
      }

      .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16rpx;

        // .price {
        //   color: #8d8d8d;
        //   font-weight: 500;
        //   font-size: 24rpx;
        // }

        .sold {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }

  .search-bar {
    padding: 20rpx;
    background-color: #fff;
  }

  .category-tabs {
    background-color: #fff;
    margin-bottom: 20rpx;
  }

  .product-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10rpx;
    box-sizing: border-box;

    .product-item {
      width: 100%;
      padding: 10rpx;
      box-sizing: border-box;

      .product-image {
        width: 100%;
        height: 350rpx;
        border-radius: 16rpx 16rpx 0 0;
      }
    }
  }
}

.nut-tab-pane {
  padding: 12rpx;
}
</style>
